<ng-template #template>
<div *ngIf="model && adorner" class="svc-page__content" [class]="adorner.css" [key2click]
  (click)="adorner.select(adorner, $event)" (dblclick)="adorner.dblclick($event)"
  (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.target)"
  [id]="adorner.page.id" [attr.data-sv-drop-target-survey-page]="adorner.dropTargetName" #container>
  <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
  <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
  <svc-page-element-content
    *ngIf="adorner.needRenderContent" 
    [model]="adorner.page" 
    [survey]="survey">
  </svc-page-element-content>
  <div *ngIf="!adorner.needRenderContent" class="svc-page__loading-content">
    <sv-ng-loading-indicator></sv-ng-loading-indicator>
  </div>
  <div *ngIf="adorner.showPlaceholder" class="svc-page__placeholder_frame">
    <div class="svc-panel__placeholder_frame">
      <div class="svc-panel__placeholder">{{adorner.placeholderText}}</div>
    </div>
  </div>
  <div *ngIf="adorner.allowDragging && !adorner.isGhost" class="svc-question__drag-area"
    (pointerdown)="adorner.onPointerDown($event)">
    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
      sv-ng-svg-icon></svg>
    <div class="svc-page__content-actions">
      <sv-action-bar [model]="adorner.actionContainer" #container></sv-action-bar>
      <sv-action-bar *ngIf="adorner.topActionContainer.hasActions" [model]="adorner.topActionContainer"></sv-action-bar>
    </div>
  </div>
  <div *ngIf="!adorner.allowDragging || adorner.isGhost" class="svc-page__content-actions">
    <sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>
    <sv-action-bar *ngIf="adorner.topActionContainer.hasActions" [model]="adorner.topActionContainer"></sv-action-bar>
  </div>
  <sv-action-bar [model]="adorner.footerActionsBar"></sv-action-bar>
</div>
</ng-template>